<template>
  <div>
    <h2>商品清单如下:</h2>
    <p v-for="(item,index) in goodsList" :key='index'>
      {{item.shopName}} {{item.price}}/元
    </p>
    <h2>请选择购买数量:</h2>
   <ul>
      <Productions
    v-for="(obj,index) in goodsList" :key="index + ''"
    :name="obj.shopName"
    :count="obj.count"
    :index='index'
    @addGoods="addLists"
    @shaoGoods="shaoLists"
    />
    </ul>
    <h2>总价为:{{total}}</h2>
  </div>
</template>

<script>
import Productions from './components/Productions.vue'
export default {
  data(){
    return{
      goodsList:[
    {
        "shopName": "可比克薯片",
        "price": 5.5,
        "count": 0
    },
    {
        "shopName": "草莓酱",
        "price": 3.5,
        "count": 0
    },
    {
        "shopName": "红烧肉",
        "price": 55,
        "count": 0
    },
    {
        "shopName": "方便面",
        "price": 12,
        "count": 0
    }
]
    }
  },
  components:{
    Productions
  },
  methods:{
    addLists(index,num){
      this.goodsList[index].count+=1
    },
    shaoLists(index,n){
       if(this.goodsList[index].count>0){
         return  this.goodsList[index].count-=1
       }
    },
  },
  computed: {
      total(){
        return this.goodsList.reduce((sum,obj1)=>{
          return sum=sum+obj1.price*obj1.count
        },0)
      }
    }
}
</script>

<style>

</style>